<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Visual Sort</title>
    <link href="//cdn.bootcss.com/pure/0.6.0/pure-min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/sort.css">
    <script type="text/javascript" src="js/ctx.js"></script>
</head>

<body>
    <div class="content">
        <center>
            <ul class="ul-sort">
                <li class="pure-button"><a href="#select_sort">选择排序</a></li>
                <li class="pure-button"><a href="#buble_sort">冒泡排序</a></li>
                <li class="pure-button"><a href="#insert_sort">插入排序</a></li>
                <li class="pure-button"><a href="#merge_sort">归并排序</a></li>
                <li class="pure-button"><a href="#quick_sort">快速排序</a></li>
            </ul>
            <canvas id="canvas" width="500" height="200"></canvas>
        </center>
        <div class="pure-g">
            <center>
                <button class="button-small pure-button pure-u-1-8" id="random">Random</button>
                <div class="pure-u-1-8"></div>
                <button class="button-small pure-button pure-u-1-8" id="sort">Sort</button>
            </center>
        </div>
    </div>

    <script type="text/javascript" src="js/sort.js"></script>
</body>

</html>
